<template>
  <div
    ref="myChart"
    :class="props.className"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>
<script lang="ts" setup>
import { defineComponent, onMounted, ref } from 'vue';
import mitt from 'mitt';
import * as echarts from 'echarts';
import zjData from '@/assets/json/zjData.json';
import chinaData from '@/assets/json/chinaData.json';
type EChartsOption = echarts.EChartsOption;

const props = defineProps({
  className: {
    type: String,
    default: 'charts',
  },
  // 图表宽度
  width: {
    type: String,
    require: true,
  },
  // 图表高度
  height: {
    type: String,
    require: true,
  },
  // 图表数据项
  options: {
    type: Object,
    default: () => ({}),
  },
});
const myChart = ref<HTMLElement>(); //也可以用const myChart = ref<any>();
const myCharts = ref();
const initChart = (data?: EChartsOption, clearCaching = false) => {
  if (data || props.options) {
    myCharts.value.setOption(data || props.options, clearCaching);
  }
};
const eventListen = () => {
  const emitter = mitt();
  myCharts.value.on('click', (params: any) => {
    emitter.emit('echartClick', params)
  });
  myCharts.value.on('dblclick', (params: any) => {
    emitter.emit('echartDblclick', params)
  });
};
onMounted(() => {
  myCharts.value = echarts.init(myChart.value!);
  echarts.registerMap('浙江', zjData as any);
  echarts.registerMap('中国', chinaData as any);
  eventListen()
  initChart();
});
</script>
